<!--
 * @Date: 2023-03-11 11:41:03
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-19 19:40:17
 * @FilePath: \A19\frontend\src\components\RunCode\List.vue
-->
<template>
    <div class="container-list">
        <div 
            :style="{
                backgroundColor:currentQuestion?.description === question?.description?
                'rgb(246, 252, 255)'
                :
                (props.judge?(props.judge(question,index)?'#ecf5ff':'#fef0f0'):'')
            }" 
            @click="clicked(question,index)" 
            class="block" :key="index" 
            v-for="(question,index) in props.questions"
            
        >
            <span v-show="!props.judge || currentQuestion?.description === question?.description">{{ index + 1 }}</span>
            <span v-show="props.judge && currentQuestion?.description !== question?.description">
                <span v-if="props.judge">
                <span class="icon" v-if="props.judge(question,index)">
                    <el-icon><Select /></el-icon>
                </span>
                <span class="icon" v-else>
                    <el-icon><CloseBold /></el-icon>
                </span>
            </span>
            </span>
        </div>
        
    </div>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue';

const props = defineProps<{
    questions: {
        description: string,
        input: string,
        output: string,
        score: number
    }[],
    clicked:(question:any,index?:any)=> any,
    currentQuestion:{
        description: string,
        input: string,
        output: string,
        score: number
    } | undefined,
    judge?:(a:any,b:any) => any
}>()
const {currentQuestion} = toRefs(props)

</script>

<style lang="less" scoped>
@fontColor: #a6a6a6;
*{
    user-select: none;
}
.container-list{
    // background-color: aliceblue;
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    .block{
        position: relative;
        height: 50px;
        width: 50px;
        background-color: white;
        border-radius: 10px;
        margin: 20px calc((100% - 200px) / 8);
        text-align: center;
        line-height: 50px;
        color: @fontColor;
        cursor: pointer;
        border: 1px solid @fontColor;
        &:hover{
            background-color:aliceblue  
            // .icon{
            //     display: none;
            // }
        }
        .icon{
            /* height: 50px; */
            /* line-height: 50px; */
            font-size: 20px;
            /* text-align: center; */
            /* transform: translate(40px, 33px); */
            position: relative;
            top: 3px;
        }
        // .icon{
        //     display: block;
        //     width: 100%;
        //     background-color: aquamarine;
        //     height: 100%;
        //     border-radius: 10px;
            // &:hover{
            //     display: none;
            // }  
        // }
    }
}
</style>